<template>
  <div class="swiper-container n">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="i in img"><img :src="i.mg"/></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  export default {
    name: 'swiper',
    data () {
      return {
        img:[
          {mg:require("../../assets/qula/lbt01.jpg")},
          {mg:require("../../assets/qula/lbt02.jpg")},
          {mg:require("../../assets/qula/lbt03.jpg")},
          {mg:require("../../assets/qula/lbt04.jpg")},
          {mg:require("../../assets/qula/lbt05.jpg")},
          {mg:require("../../assets/qula/lbt06.jpg")},
        ]
      }
    },
    mounted(){
      new Swiper('.swiper-container', {
        loop: true,
        // 如果需要分页器
//
        autoplay : 1000,
        autoplayDisableOnInteraction:false,
//        {
//          delay: 2000,
//          //stopOnLastSlide: false,
//          disableOnInteraction: false,
//        },
        pagination : '.swiper-pagination',
      })
    }
  }
</script>
<style lang="stylus" scoped>
  //样式穿透
  .n>>>.swiper-pagination-bullet-active{
    background #FFFFFF
  }
  .n{
    overflow hidden
    width: 100%;
    height :0;
    padding-bottom :26.6666666%;
    img{
      width 100%
    }

  }

</style>
